<template>
    <div class="Settlement">
       <p>订单确认</p>
        <div class="address">
            <p>选择收货地址 <span>管理收货地址</span></p>
            <RadioGroup v-model="phone">
                <Radio label="apple">
                    <p>江苏省徐州市铜山区万达广场soho5号楼704室（师欢畅 收）17372916644 <span>修改本地址</span></p>
                </Radio>
                <Radio label="android">
                    <p>江苏省徐州市铜山区万达广场soho5号楼704室（师欢畅 收）17372916644 <span>修改本地址</span></p>
                </Radio>
                <Radio label="windows">
                    <p>江苏省徐州市铜山区万达广场soho5号楼704室（师欢畅 收）17372916644 <span>修改本地址</span></p>
                </Radio>
            </RadioGroup>
        </div>
        <div class="FirmOrder">
           <p>确认订单信息</p>
            <div class="box">
                <div class="box-title">
                    <ul>
                        <li>商品</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>状态</li>
                    </ul>
                </div>
                <div class="box-delist clearfix">
                    <div class="info clearfix">
                        <img src="../../../assets/meirong1.jpg" alt="img">
                        <div class="desc">
                            <p class="title">注射为</p>
                            <p class="sub-title">
                                北京微美医疗美
                            </p>
                        </div>
                    </div>
                    <div class="price">
                        ￥399
                    </div>
                    <div class="pay">
                        568789
                    </div>
                    <div class="option">
                        待收货
                    </div>
                </div>
                <p>商家：<span>商家</span></p>
                <ul>
                    <li>买家留言：<input type="text" ></li>
                    <li>商品总价：<span>￥399.00</span></li>
                    <li>运费：<span>+0.00</span></li>
                    <li>优惠券：<span>-0.00</span></li>
                    <li>实付金额：<b>￥399.00</b></li>
                    <li><span>提交订单</span></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Settlement",
        data () {
            return {
                phone: 'apple',
            }
        }
    }
</script>

<style  lang="less">
    @import "../../../style/style.less";
    .Settlement{
        width: 700px;
        height: 1286px;
        border: solid 1px #e0e0e0;
        padding: 20px !important;
        >:first-child{
            color: @theme-color-dark;
            font-size: 18px;
            border-bottom: 2px solid @theme-color-dark;
        }
        .address{
            margin-top: 30px;
            >p{
                color: #333333;
                font-size: 16px;
                span{
                    background-color: @theme-color-dark;
                    color: white;
                    padding: 8px;
                    border-radius: 4px;
                    font-size: 14px;
                    float: right;
                    cursor: pointer;
                }
            }
            .ivu-radio-group{
                margin-top: 20px;
                p{
                    float: left;
                    color: #666666;
                    font-size: 14px;
                    width: 95%;
                    span{
                        color: @theme-color-dark;
                        float: right;
                        display: none;
                    }
                }
                .ivu-radio{
                    float: left;
                    margin-top: 2px;
                }
            }
            .ivu-radio-wrapper{
                padding: 13px 10px;
                width: 100%;
            }
            .ivu-radio-wrapper-checked{
                border: solid 1px #ff5371;
                background:rgba(255,83,113,0.2);
                font-size: 14px;
                p{
                    color: #333333;
                }
                span{
                    display: block !important;
                }
            }
        }
        .FirmOrder{
            margin-top: 25px;
            p{
                color: #333333;
                font-size: 16px;
            }
            .box{

                margin-top: 20px;
                border-top: none;
                >p{
                    color: #666666;
                    font-size: 14px;
                    padding-top: 10px;
                    span{
                        color: @theme-color-dark;
                    }
                }
                >ul{
                    >:last-child{
                        span{
                            color: white;
                            background-color: @theme-color-dark;
                            font-size: 16px;
                            padding: 12px 43px;
                        }
                    }
                    li{
                        text-align: right;
                        margin-top: 10px;
                        color: #666666;
                        font-size: 14px;
                        span{
                            color: @theme-color-dark;
                            font-size: 18px;
                        }
                        b{
                            color: @theme-color-dark;
                            font-size: 30px;
                        }
                    }
                }
               .box-title{
                   height: 43px;
                   background-color: #f5f5f5;
                   border-top: 2px solid @theme-color-dark;
                   border-right: solid 1px #e0e0e0;
                   border-left: solid 1px #e0e0e0;
                   ul{
                       >:first-child{
                           width: 45%;
                       }
                       li{
                           width: 18%;
                           text-align: center;
                           float: left;
                           line-height: 43px;
                       }
                   }
               }
               .box-delist {
                    padding: 15px;
                    font-size: 14px;
                   border: solid 1px #e0e0e0;
                    >div {
                        float: left;
                        text-align: center;
                        width: 20%;
                    }
                    .info {
                        width:36%;
                        text-align: left;
                        padding-right: 10px;
                        img {
                            width: 80px;
                            height: 80px;
                            display: inline-block;
                            float: left;
                            margin-right: 10px;
                        }
                        .desc {
                            float: left;
                            width: calc(~"100% - 90px");
                            .title {
                                padding-top: 10px;
                                /*height: 42px;*/
                                color: #333;
                            }
                            .sub-title, .count {
                                color: #999;
                            }

                        }
                    }
                    .price , .pay ,.option{
                        margin-top: 30px;
                        text-align: right;
                    }

                }
            }
        }
    }
</style>